<template>
	<view class="module">
		<NavTitle :title="title" :backgroundColor='backgroundColor' @leftClick="leftClick"></NavTitle>

		<view class="describe">
			<image :src="baseUrl + '/static/ymimage/remind.png'" class="remind" mode="aspectFill"></image>
			<text>每个账号仅支持选择一个店铺类型，不同类型所需资质不同</text>
		</view>
		<view class="shopType">
			个人店
		</view>
		<view class="store_box" :class="active == 1 ? 'activebox' : ''" @click="selectActive(1)">
			<image :src="baseUrl + '/static/ymimage/activestore.png'" v-if="active == 1" class="activestore" mode="aspectFill">
			</image>
			<view class="flex_dq ">
				<image :src="baseUrl + '/static/ymimage/store1.png'" class="storeIcon" mode="aspectFill"></image>
				<view class="store_item">
					<text class="f30 fw5 tpeydecor">个体工商户店</text>
					<image class="underline" :src="baseUrl + '/static/ymimage/underline1.png'" mode="aspectFill"></image>
				</view>
			</view>
			<view class="f26 store_cont">适合个体工商户入驻，提供身份证和个体工商户营业执照即可开店</view>
			<view class="xian"></view>
			<view class="tips mar24 flex_Z">
				<text> • 无需品牌资质</text>
			</view>
		</view>
		<view class="shopType">
			企业店
		</view>
		<view class="store_box" :class="active == 5 ? 'activebox' : ''" @click="selectActive(5)">
			<image :src="baseUrl + '/static/ymimage/activestore.png'" v-if="active == 5" class="activestore" mode="aspectFill">
			</image>
			<view class="flex_dq ">
				<image :src="baseUrl + '/static/ymimage/store5.png'" class="storeIcon" mode="aspectFill"></image>
				<view class="store_item">
					<text class="f30 fw5 tpeydecor">普通店</text>
					<image class="underline" :src="baseUrl + '/static/ymimage/underline5.png'" mode="aspectFill"></image>
				</view>
			</view>
			<view class="f26 store_cont">有营业执照，想以企业为主体开店</view>
			<view class="xian"></view>
			<view class="tips mar24 flex_Z">
				<text> • 无需品牌资质</text>
			</view>

		</view>
		<view class="store_box store_opc" :class="active == 2 ? 'activebox' : ''" @click="selectActive(2)">
			<image :src="baseUrl + '/static/ymimage/activestore.png'" v-if="active == 2" class="activestore" mode="aspectFill">
			</image>
			<view class="flex_dq ">
				<image :src="baseUrl + '/static/ymimage/store2.png'" class="storeIcon" mode="aspectFill"></image>
				<view class="store_item">
					<text class="f30 fw5 tpeydecor">旗舰店</text>
					<image class="underline" :src="baseUrl + '/static/ymimage/underline2.png'" mode="aspectFill"></image>
				</view>
			</view>
			<view class="f26 store_cont">自有品牌或持有品牌一级独占授权书可申请</view>
			<view class="xian"></view>
			<view class="tips mar24 flex_Z">
				<text> • 可经营1个或多个自有品牌的旗舰店</text>
				<text> • 或经营1个授权品牌（需为一级独占授权）的旗舰店</text>
			</view>
		</view>
		<view class="store_box store_opc" :class="active == 3 ? 'activebox' : ''" @click="selectActive(3)">
			<image :src="baseUrl + '/static/ymimage/activestore.png'" v-if="active == 3" class="activestore" mode="aspectFill">
			</image>
			<view class="flex_dq ">
				<image :src="baseUrl + '/static/ymimage/store3.png'" class="storeIcon" mode="aspectFill"></image>
				<view class="store_item">
					<text class="f30 fw5 tpeydecor">专卖店</text>
					<image class="underline" :src="baseUrl + '/static/ymimage/underline3.png'" mode="aspectFill"></image>
				</view>
			</view>
			<view class="f26 store_cont">自有品牌或持有品牌一/二级授权书可申请</view>
			<view class="xian"></view>
			<view class="tips mar24 flex_Z">
				<text> • 可经营1个或多个自有品牌</text>
				<text> • 或经营1个授权品牌（授权链不超过2级）</text>
			</view>
		</view>
		<view class="store_box store_opc" :class="active == 4 ? 'activebox' : ''" @click="selectActive(4)">
			<image :src="baseUrl + '/static/ymimage/activestore.png'" v-if="active == 4" class="activestore" mode="aspectFill">
			</image>
			<view class="flex_dq ">
				<image :src="baseUrl + '/static/ymimage/store4.png'" class="storeIcon" mode="aspectFill"></image>
				<view class="store_item">
					<text class="f30 fw5 tpeydecor">专营店</text>
					<image class="underline" :src="baseUrl + '/static/ymimage/underline4.png'" mode="aspectFill"></image>
				</view>
			</view>
			<view class="f26 store_cont">想经营一个及以上品牌可申请</view>
			<view class="xian"></view>
			<view class="tips mar24 flex_Z">
				<text> • 可经营多个自有品牌或多个授权品牌（授权链不超过4级）</text>
			</view>
		</view>
		<!-- :class="{active === 5}" -->

		<view class="empty3"></view>
		<view class="btns flex_c" @click="$u.debounce(goImprove, 300)">
			<text class="btn_box1" :class="nextTrue?'nextTrue':'nextFalse'">下一步</text>
		</view>
		<view class="empty"></view>

	</view>

</template>

<script>
	export default {
		data() {
			return {
				title: "选择店铺类型",
				backgroundColor: '',
				baseUrl: this.$imageBaseUrl,
				active: 0,
				nextTrue: false,
				ymDetails: {},
				modifyState: false
			}
		},
		onLoad(options) {
			if (options.modifyState) {
				this.modifyState = options.modifyState
				this.ymDetails = JSON.parse(uni.getStorageSync('ymShopDetails')) || {}
				this.nextTrue = true
				switch (this.ymDetails.company_type) {
					case 'sole_proprietorship':
						this.active = 1
						break
					case 'flagship':
						this.active = 2
						break
					case 'exclusive':
						this.active = 3
						break
					case 'specialty':
						this.active = 4
						break
					default:
						this.active = 5
				}
				// this.gettledDetails()
			}

		},
		methods: {
			leftClick() {
				//获取页面栈的长度
				const canNavBack = getCurrentPages()
				console.log(canNavBack.length);
				// 判断是否刷新了浏览器，刷新了浏览器，页面栈只有当前一个
				if (canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.switchTab({
						url: '/pages/index/cloudCatIndex'
					})
				}
			},
			selectActive(e) {
				if (e != 1 && e != 5) {
					uni.$u.toast('暂未开放~')
				} else {
					this.active = e
					this.nextTrue = true
				}

			},
			// 去完善
			goImprove() {
				if (this.nextTrue) {
					const data = {
						active: this.active,
					}
					if (this.modifyState) {
						data.modifyState = true
					}
					uni.navigateTo({
						url: '/pageYm/ymJoin/shopImprove?data=' + JSON.stringify(data)
					})
				} else {
					uni.$u.toast('请选择店铺类型~')
				}

			}
		},
		// 页面滚动
		onPageScroll: function(e) {
			const scrollTop = e.scrollTop; // 获取页面滚动位置
			// 根据滚动位置修改状态栏样式
			if (scrollTop > 20) {
				this.backgroundColor = '#ffffff';
			} else {
				this.backgroundColor = '';
			}
			// console.log("滚动距离为：" + e.scrollTop);
		},
	}
</script>

<style scoped>
	.module {
		width: 750rpx;
		margin: 0 auto;
		padding: 0 32rpx;
	}

	.describe {
		width: 636rpx;
		background: rgba(250, 110, 1, 0.1);
		border-radius: 10rpx;
		font-size: 22rpx;
		color: #FA6E01;
		margin: 24rpx 0;
		padding: 8rpx 16rpx;
		display: flex;
		align-items: center;


	}

	.remind {
		width: 22rpx;
		height: 22rpx;
		margin-right: 8rpx;
	}

	.shopType {

		font-weight: 400;
		font-size: 48rpx;
		color: #333333;
		line-height: 68rpx;
	}

	.store_box {
		width: 686rpx;
		background: #FFFFFE;
		border-radius: 22rpx;
		margin-top: 24rpx;
		padding: 24rpx;
	}

	.store_opc {
		opacity: 0.5;
	}

	.store_item {
		position: relative;
	}

	.underline {
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 0;
		height: 12rpx;
	}

	.store_cont {
		margin: 24rpx 0;
	}

	.storeIcon {
		width: 34rpx;
		height: 32rpx;
		margin-right: 12rpx;
	}

	.xian {
		width: 638rpx;
		height: 0rpx;
		border: 2rpx solid #F2F2F2;
		margin: 24rpx 0;
	}

	.activebox {
		width: 686rpx;
		border-radius: 22rpx;
		border: 1rpx solid #FFC300;
		position: relative;

	}

	.activestore {
		width: 57rpx;
		height: 57rpx;
		position: absolute;
		top: 0;
		right: 0;
	}

	.mar24 {
		margin: 24rpx;
	}

	.shop_box {
		width: 690rpx;
		background: #ffffff;
		border-radius: 20rpx;
		margin: 24rpx 0;
	}

	.shop_btn {
		width: 638rpx;
		height: 76rpx;
		background: #FFCC28;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin: 0 auto;
	}

	.mar27 {
		margin: 32rpx auto 0;
	}

	.tips {
		font-size: 24rpx;
		color: #3D3D3D;
	}

	.btn_box1 {
		width: 690rpx;
		height: 88rpx;
		border-radius: 20rpx;
		font-weight: 500;
		font-size: 32rpx;
		text-align: center;
		line-height: 88rpx;
	}

	.btns {
		position: fixed;
		bottom: 0rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 690rpx;
		height: 150rpx;
	}

	.nextTrue {
		background: #FFCC28;
		color: #333333;
	}

	.nextFalse {
		background: #CBCBCB;
		color: #ffffff;
	}
</style>